<template>
  <div>
    <el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-form-item label="专辑名称" prop="name">
        <el-input v-model="ruleForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="封面图片路径" prop="picturePath">
        <el-input v-model="ruleForm.picturePath" clearable></el-input>
      </el-form-item>
      <el-form-item label="歌曲数量" prop="musicCount">
        <el-input v-model="ruleForm.musicCount" onkeyup="value=value.replace(/[^\d]/g,'')"  clearable></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="themeId">
        <el-select v-model="ruleForm.themeId" placeholder="请选择" clearable>
          <el-option v-for="(item, index) of themeList" :key="index" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="歌手" prop="singerId">
        <el-select v-model="ruleForm.singerId" placeholder="请选择" clearable>
          <el-option v-for="(item, index) of singerList" :key="index" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发行日期" prop="publishTime">
        <el-date-picker v-model="ruleForm.publishTime" type="date" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input type="textarea" v-model="ruleForm.description" clearable></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: center;">
      <el-button @click="$emit('changeEditAlbumFlag', false)">取 消</el-button>
      <el-button type="primary" @click="toSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import * as themeApi from "@/api/themeApi";
import * as singerApi from "@/api/singerApi";
import * as albumApi from "@/api/albumApi";
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        musicCount: [
          { required: true, message: "请输入歌曲数量", trigger: "blur" }
        ],
        themeId: [{ required: true, message: "请选择类型", trigger: "blur" }],
        singerId: [
          { required: true, message: "请选择歌手", trigger: "blur" }
        ],
        publishTime: [
          { required: true, message: "请输入发行日期", trigger: "blur" }
        ],
      },
      themeList: [],
      singerList: []
    };
  },
  props: {
    editAlbumFlag: Boolean,
    editId: Number
  },
  mounted() {
    this.getThemeList();
    this.getSingerList();
    this.getAlbumInfo();
  },
  watch: {
    editAlbumFlag(value) {
      if (value) {
        this.getAlbumInfo();
      }
    }
  },
  methods: {
    getThemeList() {
      themeApi.getAllTheme().then(res => {
            if (res.errorCode == 0) {
                this.themeList = res.data
            }
        });
    },
    getSingerList() {
      singerApi.getAllSinger().then(res => {
            if (res.errorCode == 0) {
                this.singerList = res.data
            }
        });
    },
    getAlbumInfo() {
      return new Promise((resolve, reject) => {
        albumApi.getAlbumInfo({ id: this.editId }).then(res => {
          if (res.errorCode == 0) {
            this.ruleForm = res.data;
          }
        });
      });
    },
    toSubmit() {      
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
           albumApi.editAlbum(this.ruleForm).then(res => {
            if (res.errorCode == 0) {
              this.$message({
                showClose: true,
                message: "编辑成功！",
                type: "success"
              });
              this.$emit("changeEditAlbumFlag", false);
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scope>
</style>
